// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import vuexStore from './vuex/store'
import App from './App'
import GUID from './utils/GUID.js'
import router from './router/index'
import {
  postJSON,
  getJSON,
  getText,
  postText,
  handleSrc
} from './utils/request.js'
// 导入elementUI组件库开始
import ElementUI from 'element-ui'
Vue.prototype.$createGUID = GUID
window.Vue = Vue
const {
  Loading,
  MessageBox,
  Message,
  Notification
} = ElementUI
Vue.use(ElementUI)
Vue.prototype.$notify = Notification
// 导入elementUI组件库结束
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.config.productionTip = false

// 将拖拽注册为自定义指令
Vue.directive('drag', function (el, binding) {
  if (typeof binding.value === 'boolean') {
    // 为false时不响应拖拽
    if (!binding.value) {
      return
    }
  }
  let oDiv = el // 当前元素
  // let self = this // 上下文
  oDiv.onmousedown = function (e) {
    oDiv.style.position = 'absolute'
    // 鼠标按下，计算当前元素距离可视区的距离
    let disX = e.clientX - oDiv.offsetLeft
    let disY = e.clientY - oDiv.offsetTop

    document.onmousemove = function (e) {
      if (typeof binding.value === 'function') {
        // 将此时的位置传出去
        binding.value({
          x: e.pageX,
          y: e.pageY
        })
      }
      // 通过事件委托，计算移动的距离
      let l = e.clientX - disX
      let t = e.clientY - disY
      // 移动当前元素
      oDiv.style.left = l + 'px'
      oDiv.style.top = t + 'px'
    }
    document.onmouseup = function (e) {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
})
// 顶部样式功能按钮
// logout
Vue.prototype.logout = function () {
  let _this = this
  this.$confirm('您确定要退出吗？！', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.clear()
    _this.$router.push('/Login')
  })
}

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

// 前端路由对象
Vue.prototype.$routerConst = router
// 封装的POST请求方法
Vue.prototype.$postJSON = postJSON
// 封装的GET请求方法
Vue.prototype.$getJSON = getJSON
// 封装的POST请求方法
Vue.prototype.$postText = postText
// 封装的GET请求方法
Vue.prototype.$getText = getText
// 封装的src处理函数
Vue.prototype.$handleSrc = handleSrc
// 全局状态管理Vuex实例
Vue.prototype.$vuexStore = vuexStore

// 创建和挂载根实例，通过router配置参数注入路由
/* eslint-disable no-new */
Vue.prototype._vue = new Vue({
  el: '#app',
  store: vuexStore,
  router,
  template: '<router-view></router-view>',
  components: {
    App
  }
})
window._vue = Vue.prototype._vue
